three.js

<canvas id='canvas'></canvas>
<script src='./three.js'></script>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建摄像机（远交摄像机）
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 渲染器
    const renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('canvas'),  // 渲染到指定元素
    });
    renderer.setSize(window.innerWidth, window.innerHeight);  // 重新设置渲染器大小可以防止模糊
    // 创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 10;  // 摄像机距离
    
    function animate () {
        console.log(cube);
        requestAnimationFrame(animate);
        cube.rotation.x += .01;
        cube.rotation.y += .01;
        renderer.render(scene, camera);
    }
    animate();
</script>